{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"/>
    <script src="{% static 'js/jquery-3.3.1.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <!-- 引入封装了failback的接口--initGeetest -->
    <script src="http://static.geetest.com/static/tools/gt.js"></script>
</head>
<body>
<div class="container">
    <div class="row" style="margin-top: 50px;">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <h4 class="text-center text-warning">用户登录</h4>
            <form>
                {% csrf_token %}
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input type="text" name="username" id="username" class="form-control">
                </div>
                <div class="form-group">
                    <label for="passwd">密码:</label>
                    <input type="password" name="password" id="password" class="form-control">
                </div>
                <div class="form-group">
                    <div id="popup-captcha"></div>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-default" id="login-button">登录</button>
                </div>
                <p><a href="{% url 'user:register' %}">注册用户</a></p>
            </form>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>
</body>
<script>
    let isCheck = false;
    // 极验 发送登录数据的
    var handlerPopup = function (captchaObj) {
        // 成功的回调
        captchaObj.onSuccess(function () {
            var validate = captchaObj.getValidate();
            // 1. 取到用户填写的用户名和密码 -> 取input框的值
            $.ajax({
                url: "{% url 'user:geetest' %}", // 进行二次验证
                type: "post",
                dataType: "json",
                data: {
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                    geetest_challenge: validate.geetest_challenge,
                    geetest_validate: validate.geetest_validate,
                    geetest_seccode: validate.geetest_seccode
                },
                success: function (data) {
                    console.log(data);
                    if (data.code == 0) {
                        isCheck = true;
                    } else {
                        // 登陆成功
                        //location.href = data.msg;
                    }
                }
            });
        });
        // 将验证码加到id为captcha的元素里
        captchaObj.appendTo("#popup-captcha");
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    // 提交
    $("#login-button").click(function () {
        if (isCheck) {
            // 1. 取到用户填写的用户名和密码 -> 取input框的值
            var username = $('#username').val();
            var password = $('#password').val();
            $.ajax({
                url: "{% url 'user:login' %}", // 进行二次验证
                type: "post",
                dataType: "json",
                data: {
                    username: username,
                    password: password,
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    console.log(data);
                    if (data.code == 0) {
                        window.location.href = '/';
                    } else {

                    }
                }
            });
        }
    });

    // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
    $.ajax({
        url: "/user/geetest?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerPopup);
        }
    })
</script>
</html>